﻿<div class="row">
    <div class="col-lg-12 col-sm-12 col-xs-12">
        <h5 class="row-title before-darkorange"><i class="fa fa-reply-all darkorange"></i>Modal Dialoges</h5>
        <div class="row">
            <div class="col-lg-6 col-sm-6 col-xs-12">
                <div class="well">
                    <div class="modal-preview">
                        <div class="modal modal-primary">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                        <h4 class="modal-title">Modal Title</h4>
                                    </div>
                                    <div class="modal-body">
                                        <p>Modal Body</p>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
                                        <button type="button" class="btn btn-blue">Save</button>
                                    </div>
                                </div><!-- /.modal-content -->
                            </div><!-- /.modal-dialog -->
                        </div><!-- /.modal -->
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-sm-6 col-xs-12">
                <div class="well">
                    <div class="modal-preview">
                        <div class="modal modal-darkorange">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                        <h4 class="modal-title">Modal Title</h4>
                                    </div>
                                    <div class="modal-body">
                                        <p>Modal Body</p>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                                        <button type="button" class="btn btn-default">Ok</button>
                                    </div>
                                </div><!-- /.modal-content -->
                            </div><!-- /.modal-dialog -->
                        </div><!-- /.modal -->

                    </div>
                </div>
            </div>
        </div>
        <div class="row" ng-controller="ModalDemoCtrl">
            <div class="col-lg-6 col-sm-6 col-xs-12">
                <div class="well with-header">
                    <div class="header bordered-pink">Modals in action</div>
                    <div class="buttons-preview">
                        <h5>Modal Sizes</h5>
                        <div ng-controller="ModalDemoCtrl">
                            <script type="text/ng-template" id="myModalContent.html">
                                <div class="modal-header">
                                    <h3 class="modal-title">I'm a modal!</h3>
                                </div>
                                <div class="modal-body">
                                    <ul>
                                        <li ng-repeat="item in items">
                                            <a ng-click="selected.item = item">{{ item }}</a>
                                        </li>
                                    </ul>
                                    Selected: <b>{{ selected.item }}</b>
                                </div>
                                <div class="modal-footer">
                                    <button class="btn btn-blue" ng-click="ok()">OK</button>
                                    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
                                </div>
                            </script>

                            <button class="btn btn-default" ng-click="open('','myModalContent.html')">Open me!</button>
                            <button class="btn btn-default" ng-click="open('','myModalContent.html', 'lg')">Large modal</button>
                            <button class="btn btn-default" ng-click="open('','myModalContent.html', 'sm')">Small modal</button>
                            <div ng-show="selected">Selection from a modal: {{ selected }}</div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="col-lg-6 col-sm-6 col-xs-12">
                <div class="well with-header">
                    <div class="header bordered-blue">Message Modals</div>
                    <div class="buttons-preview">
                        <button class="btn btn-success" ng-click="open('modal-message modal-success', 'SuccessModal.html')">Success</button>
                        <button class="btn btn-info" ng-click="open('modal-message modal-info', 'InfoModal.html')">Info</button>
                        <button class="btn btn-danger" ng-click="open('modal-message modal-danger', 'DangerModal.html')">Danger</button>
                        <button class="btn btn-warning" ng-click="open('modal-message modal-warning', 'WarningModal.html')">Warning</button>
                    </div>
                </div>
            </div>

            <!--Modal Templates-->
            <!--Success Modal Templates-->
            <script type="text/ng-template" id="SuccessModal.html">

                <div class="modal-header">
                    <i class="glyphicon glyphicon-check"></i>
                </div>
                <div class="modal-title">Success</div>

                <div class="modal-body">You have done great!</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" ng-click="ok()">OK</button>
                </div>

            </script>
            <!--End Success Modal Templates-->
            <!--Info Modal Templates-->
            <script type="text/ng-template" id="InfoModal.html">
                <div class="modal-header">
                    <i class="fa fa-envelope"></i>
                </div>
                <div class="modal-title">Alert</div>
                <div class="modal-body">You'vd got mail!</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-info" ng-click="ok()">OK</button>
                </div>
            </script>
            <!--End Info Modal Templates-->
            <!--Danger Modal Templates-->
            <script type="text/ng-template" id="DangerModal.html">
                <div class="modal-header">
                    <i class="glyphicon glyphicon-fire"></i>
                </div>
                <div class="modal-title">Alert</div>
                <div class="modal-body">You'vd done bad!</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" ng-click="ok()">OK</button>
                </div>
            </script>
            <!--End Danger Modal Templates-->
            <!--Danger Modal Templates-->
            <script type="text/ng-template" id="WarningModal.html">
                <div class="modal-header">
                    <i class="fa fa-warning"></i>
                </div>
                <div class="modal-title">Warning</div>

                <div class="modal-body">Is something wrong?</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-warning" ng-click="ok()">OK</button>
                </div>
            </script>
            <!--End Danger Modal Templates-->
            <!--End Modal Templates-->
        </div>

        <h5 class="row-title before-palegreen"><i class="fa fa-columns palegreen"></i>Wells</h5>
        <div class="row">
            <div class="col-lg-6 col-sm-6 col-xs-12">
                <div class="well well-lg">
                    <h4 class="block">I am a large well</h4>
                    <p>
                        Tight pants next level keffiyeh trigger me on click haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown.
                    </p>
                </div>
                <div class="well">
                    <h4 class="block">I am a default well</h4>
                    <p>
                        Tight pants next level keffiyeh trigger me on click haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown.
                    </p>
                </div>
                <div class="well well-sm">
                    <h4 class="block">I am a small well</h4>
                    <p>
                        Tight pants next level keffiyeh trigger me on click haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown.
                    </p>
                </div>
            </div>
            <div class="col-lg-6 col-sm-6 col-xs-12">
                <div class="bordered-well-container">
                    <div class="well bordered-top bordered-blue">
                        <div class="well bordered-top bordered-danger">
                            <div class="well bordered-top bordered-warning">
                                <div class="well bordered-top bordered-palegreen">
                                    <div class="well bordered-top bordered-bottom bordered-pink">
                                        <h4 class="block">Bordered Wells</h4>
                                        <p>
                                            Tight pants next level keffiyeh trigger me on click haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown.
                                        </p>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <h5 class="row-title before-maroon"><i class="fa fa-picture-o maroon"></i>Colored Wells</h5>
        <div class="row">
            <div class="col-lg-6 col-sm-6 col-xs-12">
                <div class="well bg-magenta bordered-left bordered-yellow">
                    <h4 class="block">Colored Well</h4>
                    <p>
                        With Border on Left
                    </p>
                </div>
            </div>
            <div class="col-lg-6 col-sm-6 col-xs-12">
                <div class="well bg-palegreen bordered-right bordered-success">
                    <h4 class="block">Colored Well</h4>
                    <p>
                        With Border on Right
                    </p>
                </div>
            </div>
        </div>
        <h5 class="row-title before-blueberry"><i class="typcn typcn-th-menu blueberry"></i>Wells With Header and Footer</h5>
        <div class="row">
            <div class="col-lg-6 col-sm-6 col-xs-12">
                <div class="well with-header">
                    <div class="header bordered-magenta">Well With Header</div>
                </div>
            </div>
            <div class="col-lg-6 col-sm-6 col-xs-12">
                <div class="well with-header with-footer">
                    <div class="header bordered-palegreen">Well With Header & Footer</div>
                    <div class="footer">I'm Footer</div>
                </div>
            </div>
        </div>

        <h5 class="row-title before-orange"><i class="typcn typcn-th-menu orange"></i>Attached Wells</h5>
        <div class="row">
            <div class="col-xs-12">
                <div class="well attached top">
                    Top Well
                </div>
                <div class="well attached">
                    Middle Well
                </div>
                <div class="well attached bottom">
                    Bottom Well
                </div>
            </div>
        </div>
    </div>
</div>

